<script>
	import { blur, fly, fade, slide, scale, draw, crossfade } from 'svelte/transition';
	import { quintOut, elasticOut } from 'svelte/easing';
	import { flip } from 'svelte/animate';
	let visible = true;
	const [send, receive] = crossfade({
		fallback(node, params) {
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;

			return {
				duration: 600,
				easing: quintOut,
				css: (t) => `
					transform: ${transform} scale(${t}) ;
					opacity: ${t}
				`
			};
		}
	});

	let todos = [
		{ id: 1, done: false, description: 'write some docs' },
		{ id: 2, done: false, description: 'start writing JSConf talk' },
		{ id: 3, done: true, description: 'buy some milk' },
		{ id: 4, done: false, description: 'mow the lawn' },
		{ id: 5, done: false, description: 'feed the turtle' },
		{ id: 6, done: false, description: 'fix some bugs' }
	];

	let uid = todos.length + 1;

	function add(input) {
		const todo = {
			id: uid++,
			done: false,
			description: input.value
		};

		todos = [todo, ...todos];
		input.value = '';
	}

	function remove(todo) {
		todos = todos.filter((t) => t !== todo);
	}
	let showItems = true;
	let i = 5;
	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
	let show = false;
	function toshow() {
		show = !show;
	}
	function spin(node, { duration }) {
		return {
			duration,
			css: (t) => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`;
			}
		};
	}
</script>

<div class="flex flex-col-reverse w-full mt-10">
	<br />

	<div class="flex items-stretch w-full h-64 p-12" style=" background: #5dcaff">
		<!-- content here -->
		<div
			on:mouseenter={toshow}
			on:mouseleave={toshow}
			class="w-40 h-40 mr-20"
			style="border-radius: 30px; background: linear-gradient(45deg, #4da7db, #5bc6ff);
			box-shadow: 16px -16px 32px #4da8dd, -16px 16px 32px #5dcaff;"
		/>

		<div class="flex flex-1 -mx-2">
			{#if show}
				<div
					in:spin={{ duration: 5000 }}
					out:spin={{ duration: 3000 }}
					class="flex-1 px-4 py-2 mx-2 text-sm text-center text-pink-700 bg-pink-400 opacity-100"
				>
					.opacity-100
				</div>
				<div
					transition:fly={{ y: 200, duration: 1000 }}
					class="flex-1 px-4 py-2 mx-2 text-sm text-center text-pink-700 bg-pink-400 opacity-75"
				>
					.opacity-75
				</div>
				<div
					in:fly={{ y: -200, duration: 2000 }}
					out:fade
					class="flex-1 px-4 py-2 mx-2 text-sm text-center text-pink-700 bg-pink-400 opacity-50"
				>
					.opacity-50
				</div>
				<div
					transition:fade
					class="flex-1 px-4 py-2 mx-2 text-sm text-center text-pink-700 bg-pink-400 opacity-25"
				>
					.opacity-25
				</div>
				<div class="flex-1 px-4 py-2 mx-2 text-sm text-center text-pink-700 bg-pink-400">
					.opacity-0
				</div>
			{/if}
		</div>
		<div>
			<button
				style="border-radius: 30px; background: linear-gradient(45deg, #4da7db, #5bc6ff);
				box-shadow: 16px -16px 32px #4da8dd, -16px 16px 32px #5dcaff;"
				class="flex-none px-4 py-2 font-bold text-white transition-all duration-500 ease-in-out transform rounded hover:bg-red-500 hover:rotate-180 hover:-translate-y-1 hover:scale-110"
			>
				Hover me
			</button>
		</div>
	</div>
	<br />

	<div class="flex w-full h-auto p-12" style=" background: #5dcaff">
		<div class="flex items-stretch justify-around w-full">
			<div class="flex-1">
				<label> <input type="checkbox" bind:checked={showItems} /> show list </label>

				<label> <input type="range" bind:value={i} max="10" /> </label>
			</div>
			<div class="flex-1">
				{#if showItems}
					{#each items.slice(0, i) as item}
						<div class="flex flex-row showitems" transition:slide|local>{item}</div>
					{/each}
				{/if}
			</div>
		</div>
	</div>
	<br />

	<div class="flex w-full h-auto p-12 border border-amber-300">
		<div class="board">
			<input
				class="new-todo"
				placeholder="what needs to be done?"
				on:keydown={(event) => event.which === 13 && add(event.target)}
			/>

			<div class="left">
				<h2>todo</h2>
				{#each todos.filter((t) => !t.done) as todo (todo.id)}
					<label
						in:receive|local={{ key: todo.id }}
						out:send|local={{ key: todo.id }}
						animate:flip={{ duration: 200 }}
					>
						<input type="checkbox" bind:checked={todo.done} />
						{todo.description}
						<button on:click={() => remove(todo)}>x</button>
					</label>
				{/each}
			</div>

			<div class="right">
				<h2>done</h2>
				{#each todos.filter((t) => t.done) as todo (todo.id)}
					<label
						in:receive|local={{ key: todo.id }}
						out:send|local={{ key: todo.id }}
						animate:flip={{ duration: 200 }}
					>
						<input type="checkbox" bind:checked={todo.done} />
						{todo.description}
						<button on:click={() => remove(todo)}>x</button>
					</label>
				{/each}
			</div>
		</div>
	</div>
</div>

<style>
	.showitems {
		padding: 0.5em 0;
		border-top: 1px solid #eee;
	}
	.new-todo {
		font-size: 1.4em;
		width: 100%;
		margin: 2em 0 1em 0;
	}

	.board {
		box-sizing: border-box;
		max-width: 36em;
		min-height: 36em;
		margin: 0 auto;
		height: 100%;
		/* color: #fff; */
		color: blueviolet;
	}

	.left,
	.right {
		float: left;
		width: 50%;
		padding: 1em 1em 0 0;
		box-sizing: border-box;
		margin: 1em 0 0 0;
	}

	h2 {
		font-size: 2em;
		font-weight: 200;
		user-select: none;
	}

	label {
		top: 0;
		left: 0;
		display: block;
		font-size: 1em;
		line-height: 1;
		padding: 0.5em;
		margin: 0 auto 0.5em auto;
		border-radius: 2px;
		background-color: #eee;
		user-select: none;
	}

	input {
		margin: 0;
	}

	.right label {
		background-color: rgb(180, 240, 100);
	}

	button {
		float: right;
		height: 1em;
		box-sizing: border-box;
		padding: 0 0.5em;
		line-height: 1;
		background-color: transparent;
		border: none;
		color: rgb(170, 30, 30);
		opacity: 0;
		transition: opacity 0.2s;
	}

	label:hover button {
		opacity: 1;
	}
</style>
